<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手写hash路由</title>
</head>
<body>
<div>
	<div onclick="aaa()">去aaa</div>
	<a href="#/a">去a页面</a>
	<hr>
	<a href="#/b">去b页面</a>
	<hr>
	<a href="#/c">去c页面</a>
	<hr>
	<a href="#/d">去d页面</a>
	<br>
	<br>
	<br>
	<hr>
	<!--	路由渲染容器 -->
	<div id="cnt"></div>

</div>
<script>
  const cnt = document.querySelector('#cnt')

	function aaa(){
    console.log('aaaa')
    history.pushState({},'','/aaa')
	}

	window.addEventListener('popstate',e=>{
	  console.log(e)
	})

  // 缺省页 默认页面
  renderPage('/a')
  window.addEventListener('hashchange', () => {
    // console.log(location.hash.slice(1))
    // 根据hash值来进行不同页面渲染
    renderPage(location.hash.slice(1))
  })

  function renderPage(router) {
    switch (router) {
      case '/a':
        cnt.innerHTML = '我是A页面'
        break
      case '/b':
        cnt.innerHTML = '我是B页面'
        break
      case '/c':
        cnt.innerHTML = '我是C页面'
        break
      case '/d':
        cnt.innerHTML = '我是D页面'
        break
      default:
        cnt.innerHTML = '404页面'
    }
  }
</script>
</body>
</html>
